<template>
  <div>
<!--     <van-tabbar  v-model="active" bind:change="onChange"  active-color="#D81E06" inactive-color="#000" >
      <van-tabbar-item badge="" to="/home">
        <span>首页 </span>
        <template #icon="props">
          <img :src="props.active ? icon.homeac : icon.home" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="" to="/classify">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? icon.classac : icon.class" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item badge="" to="/cart">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? icon.cartac: icon.cart" />
        </template>
      </van-tabbar-item>
  
      <van-tabbar-item badge="" to="/me">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon.meac: icon.me "/>
        </template>
      </van-tabbar-item>
    </van-tabbar> -->
    <div class="main">
      <div class="flex">
        <div @click="index1">
          <img v-if="active==0" src="../../assets/img/index/index-x.png" alt="">
          <img v-else src="../../assets/img/index/index-w.png" alt="">
          <p>首页</p>
        </div>
        <div @click="index2">
          <img v-if="active==1" src="../../assets/img/index/fl-x.png" alt="">
          <img v-else src="../../assets/img/index/fl-w.png" alt="">
          <p>分类</p>
        </div>
        <div @click="index3">
          <img v-if="active==2" src="../../assets/img/index/gwc-x.png" alt="">
          <img v-else src="../../assets/img/index/gwc-w.png" alt="">
          <p>购物车</p>
        </div>
        <div @click="index4">
          <img v-if="active==3" src="../../assets/img/index/my-x.png" alt="">
          <img v-else src="../../assets/img/index/my-w.png" alt="">
          <p>我的</p>
        </div>
      </div>
    </div>

  </div>
</template>


<style lang="" scoped> 
  .main{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1rem;
    padding: 0.1rem 0;
    border-top: 1px solid #ccc;
    background-color: white;
  }
  .flex{
    display: flex;
    justify-content: space-around;
  }
  .flex img{
    width: 0.6rem;
  }
  .flex p{
    font-size: 0.1rem;
    text-align: center;
  }
</style>
<script>

  export default{
    data () {
      return {
        active: 0,
      }
    },
    computed: {
    },
    mounted (){
      var that =this;
      this.$bus.$on("route",function(e){
          that.active=1;
        })
    },
    methods: {
/*       aa(){
        this.$bus.$on("route",function(e){
          console.log("gggggggggggggggggg");
          this.active=1;
        })
      }, */
      index1(){
        this.active=0
        // this.$router.push("Home");
        this.$router.push("/home");
      },
      index2(){
        if(this.active!=1){
          this.active=1
          // this.$router.push("Home");
          this.$router.push("/classify");
        }
      },
      index3(){
        this.active=2
        // this.$router.push("Home");
        this.$router.push("/cart");
      },
      index4(){
        this.active=3
        // this.$router.push("Home");
        this.$router.push("/me");
      },
      classfy(){
          
        if(this.active===1){
          this.$router.push("Classify")
        }

        // console.log
      }
    }
  }


</script>